<template>
	<div>
		<el-row class="btn-group">
			<el-button type="primary" @click="openDialog">导入名单</el-button>
			<el-button type="success" @click="exportBtn(tableData)"
				>导出名单</el-button
			>
			<el-button type="primary" @click="plShStudent">批量审核通过</el-button>
			<el-button type="danger" @click="plShBStudent">批量审核不通过</el-button>
			<el-button type="info" @click="refreshData">刷新</el-button>
		</el-row>
		<div style="text-align: left">
			<el-form :inline="true">
				<el-form-item label="请选择查询类型: ">
					<el-select v-model="optionTypeValue" @change="changeOption">
						<el-option
							v-for="option in optionType"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="学号: " v-show="optionTypeValue === 0">
					<el-input
						type="text"
						placeholder="输入学号"
						v-model="searchedData[0]"
					/>
				</el-form-item>
				<el-form-item label="用户名: " v-show="optionTypeValue === 1">
					<el-input
						type="text"
						placeholder="输入名字"
						v-model="searchedData[1]"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="success" default @click="searchData">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" default @click="refreshData"
						>重置</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		<el-table
			:data="tableData"
			@selection-change="handleData"
			border
			stripe
			style="width: 100%"
		>
			<el-table-column type="selection" width="50" />
			<el-table-column
				property="studentID"
				label="学号"
				width="200"
			></el-table-column>
			<el-table-column property="studentName" label="姓名"></el-table-column>
			<el-table-column property="isFree" label="是否免费"></el-table-column>
			<el-table-column property="grade" label="年级"></el-table-column>
			<el-table-column property="department" label="学院"></el-table-column>
			<el-table-column property="isPos" label="是否保研"></el-table-column>
			<el-table-column
				property="id"
				label="身份证号"
				width="250"
			></el-table-column>
			<el-table-column property="times" label="第几次考试"></el-table-column>
			<el-table-column property="term" label="考试届数"></el-table-column>
			<el-table-column fixed="right" label="操作" width="180">
				<template v-slot="scope">
					<el-button type="primary" @click="shStudent(scope.row)"
						>通过</el-button
					>
					<el-button type="danger" @click="shBStudent(scope.row)"
						>不通过</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="预报名名单" width="50%" center v-model="dialogIsVisvited">
			<!-- <h1>Hello123</h1> -->
			<import-pre-sign-up-student
				@success="closeDialog"
			></import-pre-sign-up-student>
		</el-dialog>
	</div>
</template>

<script>
//
import ImportPreSignUpStudent from "@/components/ImportPreSignUpStudent";
import { ElMessage } from "element-plus";
let XLSX = require("xlsx");

export default {
	name: "PreSignUpStudent",
	components: {
		ImportPreSignUpStudent,
	},
	data() {
		return {
			tableData: null,
			dialogIsVisvited: false,
			output: [],
			checkedData: [],
			optionTypeValue: 0,
			optionType: [
				{
					label: "通过学号",
					value: 0,
				},
				{
					label: "通过名字",
					value: 1,
				},
			],
			searchedData: {
				0: null,
				1: null,
			},
		};
	},
	methods: {
		searchData() {
			let data = this.searchedData[this.optionTypeValue];
			if (!data) {
				ElMessage({
					message: "无查询信息",
					type: "error",
				});
			} else {
				let result = "";
				switch (this.optionTypeValue) {
					case 0:
						result = "studentID";
						break;
					case 1:
						result = "studentName";
						break;
				}
				let t = [];
				this.tableData.forEach((item) => {
					if (item[result].toString().indexOf(data) !== -1) t.push(item);
				});
				this.tableData = t;
			}
		},
		refreshData() {
			fetch(`${this.$store.getters.point}/Admin/preSignUp/getAllSignUp`, {
				method: "POST",
			})
				.then((response) => response.text())
				.then((result) => {
					this.tableData = JSON.parse(result).data;
					this.tableData.forEach((item) => {
						item.isFree = parseInt(item.isFree) === 0 ? "否" : "是";
						item.isPos = parseInt(item.isPos) === 0 ? "否" : "是";
					});
				});
		},
		exportBtn(tableData) {
			let worksheet = XLSX.utils.json_to_sheet(tableData);
			let workbook = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(workbook, worksheet, "第一页");
			XLSX.writeFile(workbook, "预报名名单.xlsx");
		},
		importBtn() {},
		openDialog() {
			this.dialogIsVisvited = true;
		},
		closeDialog() {
			this.dialogIsVisvited = false;
			this.refreshData();
		},
		shStudent(value) {
			let requestBody = new URLSearchParams();
			requestBody.append("ids", value.studentID);

			fetch(`${this.$store.getters.point}/Admin/preSignUp/resetStatus`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = parseInt(JSON.parse(result).code);
					if (data == 1) {
						ElMessage({
							message: "审核成功",
							type: "success",
						});
						this.refreshData();
					} else {
						ElMessage({
							message: "审核失败",
							type: "error",
						});
					}
				});
		},
		shBStudent(value) {
			let requestBody = new URLSearchParams();
			requestBody.append("ids", value.studentID);

			fetch(`${this.$store.getters.point}/Admin/preSignUp/setStatus`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = parseInt(JSON.parse(result).code);
					if (data == 1) {
						ElMessage({
							message: "审核成功",
							type: "success",
						});
						this.refreshData();
					} else {
						ElMessage({
							message: "审核失败",
							type: "error",
						});
					}
				});
		},
		handleData(val) {
			this.checkedData = [];
			val.forEach((item) => {
				this.checkedData.push(item.studentID);
			});
		},
		plShStudent() {
			let requestBody = new URLSearchParams();
			this.checkedData.forEach((item) => {
				requestBody.append("ids", item);
			});

			fetch(`${this.$store.getters.point}/Admin/preSignUp/resetStatus`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = parseInt(JSON.parse(result).code);
					if (data == 1) {
						ElMessage({
							message: "审核成功",
							type: "success",
						});
						this.refreshData();
					} else {
						ElMessage({
							message: "审核失败",
							type: "error",
						});
					}
				});
		},
		plShBStudent() {
			let requestBody = new URLSearchParams();
			this.checkedData.forEach((item) => {
				requestBody.append("ids", item);
			});

			fetch(`${this.$store.getters.point}/Admin/preSignUp/setStatus`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = parseInt(JSON.parse(result).code);
					if (data == 1) {
						ElMessage({
							message: "审核成功",
							type: "success",
						});
						this.refreshData();
					} else {
						ElMessage({
							message: "审核失败",
							type: "error",
						});
					}
				});
		},
	},
	mounted() {
		this.refreshData();
	},
};
</script>

<style scoped>
.btn-group {
	margin-bottom: 30px;
}
</style>
